import React from 'react'
import { useAuth } from '../contexts/AuthProvider'
import { Button } from '../components/ui/Button'
import { 
  Sparkles, 
  BookOpen, 
  Bell, 
  BarChart3,
  ArrowRight,
  CheckCircle
} from 'lucide-react'

export function Landing() {
  const { user } = useAuth()

  // Redirect if already authenticated
  React.useEffect(() => {
    if (user) {
      window.location.href = '/app/dashboard'
    }
  }, [user])

  const features = [
    {
      icon: <BookOpen className="h-8 w-8" />,
      title: 'Personalized Recommendations',
      description: 'AI-powered paper recommendations based on your research interests and reading history.'
    },
    {
      icon: <Bell className="h-8 w-8" />,
      title: 'Smart Alerts',
      description: 'Never miss important papers with intelligent keyword and author-based notifications.'
    },
    {
      icon: <BarChart3 className="h-8 w-8" />,
      title: 'Research Analytics',
      description: 'Track your reading patterns and discover trends in your research areas.'
    }
  ]

  const pricingPlans = [
    {
      name: 'Free',
      price: '$0',
      description: 'Perfect for getting started',
      features: ['10 saved papers', '3 alerts', 'Basic search', 'Email notifications'],
      cta: 'Get Started Free'
    },
    {
      name: 'Premium',
      price: '$9.99',
      period: '/month',
      description: 'For serious researchers',
      features: ['1,000 saved papers', 'Unlimited alerts', 'Advanced search', 'Analytics dashboard', 'Priority support'],
      cta: 'Start Premium Trial',
      popular: true
    },
    {
      name: 'Academic',
      price: '$4.99',
      period: '/month',
      description: 'Special pricing for students',
      features: ['500 saved papers', '50 alerts', 'Advanced search', 'Student verification required'],
      cta: 'Verify Student Status'
    }
  ]

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                <Sparkles className="h-4 w-4 text-white" />
              </div>
              <span className="font-bold text-xl text-gray-900">ArXiv+</span>
            </div>
            
            <div className="flex items-center space-x-4">
              <Button
                variant="ghost"
                onClick={() => window.location.href = '/auth/login'}
              >
                Sign In
              </Button>
              <Button
                onClick={() => window.location.href = '/auth/register'}
              >
                Get Started
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            Your Personal
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              {' '}Research Assistant
            </span>
          </h1>
          
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            Discover relevant ArXiv papers, track your reading progress, and stay updated 
            with the latest research in your field. Powered by AI recommendations.
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button 
              size="lg" 
              className="px-8"
              onClick={() => window.location.href = '/auth/register'}
            >
              Start Free Today <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button 
              variant="outline" 
              size="lg" 
              className="px-8"
              onClick={() => window.location.href = '#features'}
            >
              Learn More
            </Button>
          </div>
          
          <p className="text-sm text-gray-500 mt-4">
            Free forever • No credit card required • Start in 30 seconds
          </p>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Everything you need for research
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              From discovery to analysis, ArXiv+ helps you stay on top of the latest research
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="text-center p-6">
                <div className="text-blue-600 mb-4 flex justify-center">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-2">
                  {feature.title}
                </h3>
                <p className="text-gray-600">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="bg-gray-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Choose your research plan
            </h2>
            <p className="text-xl text-gray-600">
              Start free and upgrade as your research needs grow
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {pricingPlans.map((plan, index) => (
              <div key={index} className={`bg-white rounded-lg border-2 p-8 ${
                plan.popular ? 'border-blue-500 relative' : 'border-gray-200'
              }`}>
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                      Most Popular
                    </span>
                  </div>
                )}
                
                <div className="text-center mb-8">
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{plan.name}</h3>
                  <div className="mb-2">
                    <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
                    {plan.period && <span className="text-gray-600">{plan.period}</span>}
                  </div>
                  <p className="text-gray-600">{plan.description}</p>
                </div>
                
                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-3 flex-shrink-0" />
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
                
                <Button 
                  className="w-full" 
                  variant={plan.popular ? 'default' : 'outline'}
                  onClick={() => window.location.href = '/auth/register?plan=' + plan.name.toLowerCase()}
                >
                  {plan.cta}
                </Button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center space-x-2 mb-4 md:mb-0">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                <Sparkles className="h-4 w-4 text-white" />
              </div>
              <span className="font-bold text-xl">ArXiv+</span>
            </div>
            
            <div className="flex items-center space-x-6 text-sm text-gray-400">
              <a href="#" className="hover:text-white">Privacy Policy</a>
              <a href="#" className="hover:text-white">Terms of Service</a>
              <a href="#" className="hover:text-white">Contact</a>
            </div>
          </div>
          
          <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
            <p>&copy; 2024 ArXiv+. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}